<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">我的排课</text>
      <text class="page-subtitle">管理您的课程分配和教学安排</text>
    </view>

    <!-- 统计信息 -->
    <view class="stats-section">
      <view class="stat-card">
        <text class="stat-number">{{ assignedCourses.length }}</text>
        <text class="stat-label">已分配课程</text>
      </view>
      <view class="stat-card">
        <text class="stat-number">{{ availableCourses.length }}</text>
        <text class="stat-label">可选课程</text>
      </view>
    </view>

    <!-- 功能选项卡 -->
    <view class="tab-section">
      <view class="tab-list">
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 'assigned' }"
          @tap="switchTab('assigned')">
          <text>已分配课程</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 'available' }"
          @tap="switchTab('available')">
          <text>可选课程</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 'create' }"
          @tap="switchTab('create')">
          <text>创建课程</text>
        </view>
      </view>
    </view>

    <!-- 已分配课程列表 -->
    <view class="content-section" v-if="currentTab === 'assigned'">
      <view class="search-section">
        <view class="search-box">
          <input 
            class="search-input" 
            placeholder="搜索课程名称..." 
            v-model="searchKeyword"
            @input="searchAssignedCourses" />
          <text class="search-icon">🔍</text>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-state" v-if="isLoadingAssigned">
        <text class="loading-text">加载中...</text>
      </view>

      <view class="course-list" v-else-if="assignedCourses.length > 0">
        <view
          class="course-card"
          v-for="course in assignedCourses"
          :key="course.id">
          <view class="course-header">
            <image
              class="course-icon"
              :src="course.coverImage || '/static/default-course.png'"
              mode="aspectFill" />
            <view class="course-info">
              <text class="course-title">{{ course.title }}</text>
              <text class="course-desc">{{ course.description || '暂无描述' }}</text>
              <view class="course-footer">
                <text class="course-price">¥{{ course.price }}</text>
                <text class="course-subject">{{ course.subjectName }}</text>
              </view>
            </view>
          </view>
          <view class="course-actions">
            <button class="action-btn danger" @tap="unassignCourse(course)">取消分配</button>
          </view>
        </view>
      </view>

      <view class="empty-state" v-else>
        <text class="empty-icon">📚</text>
        <text class="empty-text">暂无已分配的课程</text>
        <text class="empty-tip">点击"可选课程"选择要教授的课程</text>
      </view>
    </view>

    <!-- 可选课程列表 -->
    <view class="content-section" v-if="currentTab === 'available'">
      <view class="search-section">
        <view class="search-box">
          <input 
            class="search-input" 
            placeholder="搜索课程名称..." 
            v-model="availableSearchKeyword"
            @input="searchAvailableCourses" />
          <text class="search-icon">🔍</text>
        </view>
        <view class="filter-section">
          <picker
            @change="filterBySubject"
            :value="subjectIndex"
            :range="subjectOptions"
            range-key="name">
            <view class="filter-btn">
              <text>{{ getSelectedSubjectText() }}</text>
              <text class="filter-arrow">▼</text>
            </view>
          </picker>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-state" v-if="isLoadingAvailable">
        <text class="loading-text">加载中...</text>
      </view>

      <view class="course-list" v-else-if="availableCourses.length > 0">
        <view
          class="course-card"
          v-for="course in availableCourses"
          :key="course.id">
          <view class="course-header">
            <image
              class="course-icon"
              :src="course.coverImage || '/static/default-course.png'"
              mode="aspectFill" />
            <view class="course-info">
              <text class="course-title">{{ course.title }}</text>
              <text class="course-desc">{{ course.description || '暂无描述' }}</text>
              <view class="course-footer">
                <text class="course-price">¥{{ course.price }}</text>
                <text class="course-subject">{{ course.subjectName }}</text>
              </view>
            </view>
          </view>
          <view class="course-actions">
            <button class="action-btn primary" @tap="assignCourse(course)">选择教授</button>
          </view>
        </view>
      </view>

      <view class="empty-state" v-else>
        <text class="empty-icon">🔍</text>
        <text class="empty-text">暂无可选课程</text>
        <text class="empty-tip">尝试调整搜索条件或联系管理员</text>
      </view>
    </view>

    <!-- 创建课程 -->
    <view class="content-section" v-if="currentTab === 'create'">
      <view class="form-section">
        <view class="form-group">
          <text class="form-label">课程标题</text>
          <input 
            class="form-input" 
            placeholder="请输入课程标题" 
            v-model="newCourse.title" />
        </view>

        <view class="form-group">
          <text class="form-label">课程描述</text>
          <textarea 
            class="form-textarea" 
            placeholder="请输入课程描述" 
            v-model="newCourse.description" />
        </view>

        <view class="form-group">
          <text class="form-label">选择科目</text>
          <picker 
            @change="selectSubject" 
            :value="newCourseSubjectIndex" 
            :range="subjects" 
            range-key="name">
            <view class="picker-item">
              <text>{{ newCourse.subjectName || '请选择科目' }}</text>
              <text class="picker-arrow">></text>
            </view>
          </picker>
        </view>

        <view class="form-group">
          <text class="form-label">课程价格</text>
          <input 
            class="form-input" 
            type="number" 
            placeholder="请输入课程价格" 
            v-model="newCourse.price" />
        </view>

        <view class="form-group">
          <text class="form-label">原价（可选）</text>
          <input 
            class="form-input" 
            type="number" 
            placeholder="请输入原价" 
            v-model="newCourse.originalPrice" />
        </view>

        <view class="form-actions">
          <button class="submit-btn" @tap="createAndAssignCourse">创建并分配给我</button>
        </view>
      </view>
    </view>

    <!-- 加载提示 -->
    <view class="loading-overlay" v-if="loading">
      <view class="loading-content">
        <text class="loading-text">加载中...</text>
      </view>
    </view>
  </view>
</template>

<script>
import { teacherApi } from '@/api/teacher.js'
import { subjectApi } from '@/api/subject.js'

export default {
  data() {
    return {
      currentTab: 'assigned',
      loading: false,

      // 用户信息
      userInfo: null,

      // 搜索关键词
      searchKeyword: '',
      availableSearchKeyword: '',

      // 课程数据
      assignedCourses: [],
      availableCourses: [],

      // 科目数据
      subjects: [],
      subjectIndex: 0,
      selectedSubject: null,

      // 新课程数据
      newCourse: {
        title: '',
        description: '',
        subjectId: null,
        subjectName: '',
        price: '',
        originalPrice: ''
      },
      newCourseSubjectIndex: 0,

      // 分页参数
      currentPage: 1,
      pageSize: 20,

      // 加载状态
      isLoadingAssigned: false,
      isLoadingAvailable: false,
      isCreating: false
    }
  },

  computed: {
    // 科目选项（包含"请选择"）
    subjectOptions() {
      const defaultOption = { name: '请选择', id: null }
      return [defaultOption, ...this.subjects.map(subject => ({
        name: subject.title || subject.subjectName || subject.name || '未知科目',
        id: subject.id,
        ...subject
      }))]
    }
  },

  onLoad() {
    this.initData()
  },

  onShow() {
    // 页面显示时刷新数据
    if (this.currentTab === 'assigned') {
      this.loadAssignedCourses()
    } else if (this.currentTab === 'available') {
      this.loadAvailableCourses()
    }
  },

  methods: {
    // 初始化数据
    async initData() {
      // 获取用户信息
      try {
        const userInfo = uni.getStorageSync('userInfo')
        if (userInfo) {
          this.userInfo = typeof userInfo === 'string' ? JSON.parse(userInfo) : userInfo
          console.log('获取到用户信息:', this.userInfo)
        } else {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateTo({ url: '/pages/login/index' })
          }, 1500)
          return
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        uni.showToast({
          title: '获取用户信息失败',
          icon: 'none'
        })
        return
      }

      this.loading = true
      try {
        await Promise.all([
          this.loadSubjects(),
          this.loadAssignedCourses()
        ])
      } catch (error) {
        console.error('初始化数据失败:', error)
        uni.showToast({
          title: '加载数据失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    // 切换选项卡
    switchTab(tab) {
      this.currentTab = tab
      
      if (tab === 'assigned') {
        this.loadAssignedCourses()
      } else if (tab === 'available') {
        this.loadAvailableCourses()
      }
    },

    // 加载科目列表
    async loadSubjects() {
      try {
        console.log('开始加载科目列表')
        const res = await subjectApi.getAllSubjects()
        console.log('科目API响应:', res)

        if (res && res.code === 200) {
          // 根据后端返回的数据结构，科目信息在data字段中
          this.subjects = res.data || []
          console.log('科目列表:', this.subjects)

          // 如果科目列表为空，显示提示
          if (this.subjects.length === 0) {
            console.log('科目列表为空')
            uni.showToast({
              title: '暂无科目数据',
              icon: 'none'
            })
          }
        } else {
          console.error('获取科目失败:', res ? res.message : '响应为空')
          // 如果API调用失败，使用默认科目数据进行测试
          this.subjects = [
            { id: 1, name: '数学', title: '数学' },
            { id: 2, name: '语文', title: '语文' },
            { id: 3, name: '英语', title: '英语' },
            { id: 4, name: '物理', title: '物理' },
            { id: 5, name: '化学', title: '化学' }
          ]
          console.log('使用默认科目数据:', this.subjects)
        }
      } catch (error) {
        console.error('加载科目失败:', error)
        // 如果出现异常，也使用默认科目数据
        this.subjects = [
          { id: 1, name: '数学', title: '数学' },
          { id: 2, name: '语文', title: '语文' },
          { id: 3, name: '英语', title: '英语' },
          { id: 4, name: '物理', title: '物理' },
          { id: 5, name: '化学', title: '化学' }
        ]
        console.log('异常情况下使用默认科目数据:', this.subjects)
      }
    },

    // 加载已分配课程
    async loadAssignedCourses() {
      if (!this.userInfo || !this.userInfo.id) {
        console.log('用户信息不完整，无法加载已分配课程')
        return
      }

      this.isLoadingAssigned = true
      try {
        console.log('开始加载已分配课程，用户ID:', this.userInfo.id)
        const res = await teacherApi.getAssignedCourses({
          userId: this.userInfo.id,
          page: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.searchKeyword
        })

        console.log('已分配课程API响应:', res)
        if (res && res.code === 200) {
          this.assignedCourses = res.data.records || []
          console.log('已分配课程列表:', this.assignedCourses)
        } else {
          console.error('获取已分配课程失败:', res.message)
          uni.showToast({
            title: res.message || '获取课程失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载已分配课程失败:', error)
        uni.showToast({
          title: '加载课程失败',
          icon: 'none'
        })
      } finally {
        this.isLoadingAssigned = false
      }
    },

    // 加载可选课程
    async loadAvailableCourses() {
      if (!this.userInfo || !this.userInfo.id) {
        console.log('用户信息不完整，无法加载可选课程')
        return
      }

      this.isLoadingAvailable = true
      try {
        console.log('开始加载可选课程，用户ID:', this.userInfo.id)
        console.log('筛选条件 - 关键词:', this.availableSearchKeyword, '科目:', this.selectedSubject)
        const res = await teacherApi.getAvailableCourses({
          userId: this.userInfo.id,
          page: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.availableSearchKeyword,
          subjectId: this.selectedSubject ? this.selectedSubject.id : null
        })

        console.log('可选课程API响应:', res)
        if (res && res.code === 200) {
          this.availableCourses = res.data.records || []
          console.log('可选课程列表:', this.availableCourses)
        } else {
          console.error('获取可选课程失败:', res.message)
          uni.showToast({
            title: res.message || '获取课程失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载可选课程失败:', error)
        uni.showToast({
          title: '加载课程失败',
          icon: 'none'
        })
      } finally {
        this.isLoadingAvailable = false
      }
    },

    // 搜索已分配课程
    searchAssignedCourses() {
      this.currentPage = 1
      this.loadAssignedCourses()
    },

    // 搜索可选课程
    searchAvailableCourses() {
      this.currentPage = 1
      this.loadAvailableCourses()
    },

    // 获取选中科目的显示文本
    getSelectedSubjectText() {
      if (this.subjectIndex === 0) {
        return '请选择'
      }
      if (this.selectedSubject) {
        return this.selectedSubject.title || this.selectedSubject.subjectName || this.selectedSubject.name || '未知科目'
      }
      return '请选择'
    },

    // 按科目筛选
    filterBySubject(e) {
      const index = e.detail.value
      this.subjectIndex = index

      if (index === 0) {
        // 选择"请选择"，不进行筛选
        this.selectedSubject = null
      } else {
        // 选择具体科目，index-1是因为第一个选项是"请选择"
        this.selectedSubject = this.subjects[index - 1] || null
      }

      console.log('筛选科目:', this.selectedSubject)
      this.currentPage = 1
      this.loadAvailableCourses()
    },

    // 选择科目（创建课程用）
    selectSubject(e) {
      const index = e.detail.value
      this.newCourseSubjectIndex = index
      const subject = this.subjects[index]
      if (subject) {
        // 根据后端Courses表结构，科目信息可能在subjectId字段中
        this.newCourse.subjectId = subject.subjectId || subject.id
        this.newCourse.subjectName = subject.subjectName || subject.title || subject.name
        console.log('选择科目:', this.newCourse.subjectId, this.newCourse.subjectName)
      }
    },

    // 分配课程给自己
    async assignCourse(course) {
      if (!this.userInfo || !this.userInfo.id) {
        uni.showToast({
          title: '用户信息不完整',
          icon: 'none'
        })
        return
      }

      try {
        uni.showLoading({ title: '分配中...' })

        console.log('开始分配课程:', course.id, '给用户:', this.userInfo.id)
        const res = await teacherApi.assignExistingCourse({
          userId: this.userInfo.id,
          courseId: course.id
        })

        console.log('分配课程API响应:', res)
        if (res && res.code === 200) {
          uni.showToast({
            title: '分配成功',
            icon: 'success'
          })

          // 刷新数据
          this.loadAssignedCourses()
          this.loadAvailableCourses()
        } else {
          uni.showToast({
            title: res.message || '分配失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('分配课程失败:', error)
        uni.showToast({
          title: '分配失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 取消课程分配
    async unassignCourse(course) {
      if (!this.userInfo || !this.userInfo.id) {
        uni.showToast({
          title: '用户信息不完整',
          icon: 'none'
        })
        return
      }

      try {
        const res = await uni.showModal({
          title: '确认取消',
          content: `确定要取消《${course.title}》的分配吗？`
        })

        if (!res.confirm) return

        uni.showLoading({ title: '取消中...' })

        console.log('开始取消课程分配:', course.id, '用户:', this.userInfo.id)
        const apiRes = await teacherApi.unassignCourse({
          userId: this.userInfo.id,
          courseId: course.id
        })

        console.log('取消分配API响应:', apiRes)
        if (apiRes && apiRes.code === 200) {
          uni.showToast({
            title: '取消成功',
            icon: 'success'
          })

          // 刷新数据
          this.loadAssignedCourses()
          this.loadAvailableCourses()
        } else {
          uni.showToast({
            title: apiRes.message || '取消失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('取消分配失败:', error)
        uni.showToast({
          title: '取消失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 创建并分配课程
    async createAndAssignCourse() {
      if (!this.userInfo || !this.userInfo.id) {
        uni.showToast({
          title: '用户信息不完整',
          icon: 'none'
        })
        return
      }

      // 表单验证
      if (!this.newCourse.title.trim()) {
        uni.showToast({
          title: '请输入课程标题',
          icon: 'none'
        })
        return
      }

      if (!this.newCourse.subjectId) {
        uni.showToast({
          title: '请选择科目',
          icon: 'none'
        })
        return
      }

      if (!this.newCourse.price || this.newCourse.price <= 0) {
        uni.showToast({
          title: '请输入有效的课程价格',
          icon: 'none'
        })
        return
      }

      this.isCreating = true
      try {
        uni.showLoading({ title: '创建中...' })

        console.log('开始创建课程，用户ID:', this.userInfo.id)
        const res = await teacherApi.createAndAssignCourse({
          userId: this.userInfo.id,
          title: this.newCourse.title,
          description: this.newCourse.description,
          subjectId: this.newCourse.subjectId,
          price: parseFloat(this.newCourse.price),
          originalPrice: this.newCourse.originalPrice ? parseFloat(this.newCourse.originalPrice) : null
        })

        console.log('创建课程API响应:', res)
        if (res && res.code === 200) {
          uni.showToast({
            title: '创建成功',
            icon: 'success'
          })

          // 重置表单
          this.resetNewCourseForm()

          // 切换到已分配课程页面并刷新数据
          this.currentTab = 'assigned'
          this.loadAssignedCourses()
        } else {
          uni.showToast({
            title: res.message || '创建失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('创建课程失败:', error)
        uni.showToast({
          title: '创建失败',
          icon: 'none'
        })
      } finally {
        this.isCreating = false
        uni.hideLoading()
      }
    },

    // 重置新课程表单
    resetNewCourseForm() {
      this.newCourse = {
        title: '',
        description: '',
        subjectId: null,
        subjectName: '',
        price: '',
        originalPrice: ''
      }
      this.newCourseSubjectIndex = 0
    },


  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 30rpx 40rpx;
  color: white;
  text-align: center;
}

.page-title {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 16rpx;
}

.page-subtitle {
  font-size: 28rpx;
  opacity: 0.9;
  display: block;
}

/* 统计信息 */
.stats-section {
  display: flex;
  padding: 30rpx;
  gap: 20rpx;
}

.stat-card {
  flex: 1;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 48rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 26rpx;
  color: #666;
  display: block;
}

/* 选项卡 */
.tab-section {
  padding: 0 30rpx;
  margin-bottom: 20rpx;
}

.tab-list {
  display: flex;
  background: white;
  border-radius: 16rpx;
  padding: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 16rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #666;
  transition: all 0.3s ease;
}

.tab-item.active {
  background: #667eea;
  color: white;
  font-weight: bold;
}

/* 内容区域 */
.content-section {
  padding: 0 30rpx;
}

/* 搜索区域 */
.search-section {
  margin-bottom: 20rpx;
}

.search-box {
  position: relative;
  background: white;
  border-radius: 12rpx;
  padding: 0 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 16rpx;
}

.search-input {
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
  padding-right: 60rpx;
}

.search-icon {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32rpx;
  color: #999;
}

.filter-section {
  display: flex;
  gap: 16rpx;
}

.filter-btn {
  background: white;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  padding: 20rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #333;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  min-width: 200rpx;
}

.filter-arrow {
  margin-left: 12rpx;
  color: #999;
  font-size: 24rpx;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

/* 课程列表 */
.course-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.course-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.course-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.course-icon {
  width: 120rpx;
  height: 90rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  background-color: #f0f0f0;
  flex-shrink: 0;
}

.course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
  line-height: 1.4;
}

.course-desc {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 12rpx;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.course-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff6b6b;
}

.course-subject {
  font-size: 24rpx;
  color: #999;
  background: #f0f0f0;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
}

.course-actions {
  display: flex;
  gap: 16rpx;
  justify-content: flex-end;
  margin-top: 20rpx;
}

.action-btn {
  padding: 16rpx 32rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  border: none;
}

.action-btn.primary {
  background: #667eea;
  color: white;
}

.action-btn.danger {
  background: #ff6b6b;
  color: white;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 100rpx 30rpx;
}

.empty-icon {
  font-size: 120rpx;
  display: block;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 32rpx;
  color: #666;
  display: block;
  margin-bottom: 16rpx;
}

.empty-tip {
  font-size: 26rpx;
  color: #999;
  display: block;
}

/* 表单样式 */
.form-section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 16rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.form-input:focus {
  border-color: #667eea;
  background: white;
}

.form-textarea {
  width: 100%;
  min-height: 120rpx;
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  resize: vertical;
}

.form-textarea:focus {
  border-color: #667eea;
  background: white;
}

.picker-item {
  height: 80rpx;
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 8rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #333;
}

.picker-arrow {
  color: #999;
  font-size: 32rpx;
}

.form-actions {
  margin-top: 40rpx;
  text-align: center;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.submit-btn:active {
  opacity: 0.8;
}

/* 加载遮罩 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-content {
  background: white;
  border-radius: 12rpx;
  padding: 40rpx;
  text-align: center;
}

.loading-text {
  font-size: 28rpx;
  color: #333;
}
</style>
